<template>
	<view class="index">
<!-- 		<uni-nav-bar fixed="true" status-bar="true" :background-color="bgColor" color="#fff">
		   <view class="search">
			   <view class="input-box"><uni-icon type="search" size="20"></uni-icon> 寻找宝贝</view>
			   <view class="cart">
				   <uni-icon type="home" size="30"></uni-icon>
			   </view>
			   
		   </view>	   
		</uni-nav-bar> -->
		
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':''"
				    v-for="(item,index) in categoryList">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
				<banner :ad-list="bannerList" h="125"></banner>
				<view class="son-cate">
					<view class="son-item" v-for="(item,index) in subCategoryList" :key="index">
						<view class="son-name">{{item.name}}</view>
						<view class="cate-box">
							<view :id="index===0?'first':''" class="nav-right-item" v-for="(sitem,sindex) in item.son_category" :key="sindex" @tap="toList(sitem)">
								<image :src="sitem.image" />
								<view>{{sitem.name}}</view>
							</view>
						</view>
						
					</view>
					
				</view>
				
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import banner from '../../components/banner.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import Request from '../../common/request.js';
	
	export default {
		components: {
			uniNavBar, banner, uniIcon
		},
		data() {
			return {
				bgColor: '#e60012',
				categoryList: [],
				bannerList: [],
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				categoryIndex: 0,
				subCategoryList: [],
			}
		},
		onPullDownRefresh:function(){
			this.initData();
			this.getCategory();			
			this.height = uni.getSystemInfoSync().windowHeight-44;	
		},
		methods: {
			initData() {
				this.categoryList = [];
				this.bannerList= [];
				this.height = 0;
				this.categoryActive = 0;
				this.scrollTop= 0;
				this.scrollHeight= 0;
				this.categoryIndex= 0;
				this.subCategoryList= [];
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.categoryActive = index;
				this.subCategoryList = categroy.sub_class;
				this.scrollTop = -this.scrollHeight * index;
				this.categoryIndex = index;
				this.getSubCategory(index);
			
			},
			//获取分类 
			getCategory: function() {
				var that = this;
				var pararms = {
					url: 'category/index',
					sCallback: function(res) {
						console.log(res)
						that.categoryList = res.data.category;
						that.bannerList = res.data.banners;
						that.getSubCategory(0);
						uni.stopPullDownRefresh();
					}
				}
				
				Request.send(pararms);
				
			},
			//获取二级分类
			getSubCategory: function(index){
				if(this.categoryList[index]['sub_class']){
					return false;
				}
				var pid = this.categoryList[index]['id'];
				var that = this;
				var pararms = {
					url: 'category/getSonCategory',
					data: {id: pid},
					sCallback: function(res) {
						
						that.categoryList[index]['sub_class'] = res.data;
						that.subCategoryList = res.data;
						
					}
				}
				
				Request.send(pararms);
			},
			//去商品列表
			toList: function(item) {
				uni.navigateTo({
					url: '/pages/category/goods?id='+item.id+'&title='+item.name
				})
			}
		},
		onLoad: function () {
			this.getCategory();			
			this.height = uni.getSystemInfoSync().windowHeight-44;					
		},
		onReady:function(){
			// this.categoryClickMain(this.categoryList[0], 0);
		}
	}
</script>

<style>
	.index{
		/* padding-top: 44px; */
	}
	
	/* 顶部搜索开始 */
		.search{	
			align-items: center;
			display: flex;
			width: 100%;
			height: 44px;
		}
		
		.uni-navbar .search view{
			height: 30px;
			line-height: 30px;
		}
		
		.search .input-box{
			background: rgba(255, 255, 255, 0.3);
			color: #fff;
			font-size: 24upx;
			flex: 1;
			border-radius: 8upx;
			flex: 1;
			text-align: center;
		}
		
		.search .cart{
			width: 100upx;
			display: flex;
			justify-content: center;
			/* align-items: center; */
		}
	/* 顶部搜索结束 */
	

	
	.page-body {
		display: flex;
		
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 200upx;
		background: #F4F4F4;
	}

	.nav-left-item {
		height: 90upx;
		font-size: 26upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 4upx solid #F4F4F4;
		color: #333;
	}
	
	.nav-left-item.active{
		color: #FC3F78;
		border-color: #FC3F78;
		background: #fff;
	}

	.nav-right {
		width: 550upx;
		background: #fff;
	}
	
	.banner{
		margin-bottom: 10upx;
	}
	
	.nav-right-box{
		margin-top: 10upx;
	}
	
	.son-name{
		font-size: 28upx;
		padding: 20upx;
	}
	
	.cate-box{
		background: #F5F5F5;
		display: flex;
		flex-wrap: wrap;
		width: 550upx;
	}

	.nav-right-item {
		width: 180upx;
		margin-right: 3upx;
		margin-bottom: 6upx;
		padding: 20upx 0;
		background: #fff;
		text-align: center;
		font-size: 24upx;
	}
	
	.nav-right-item view{
		justify-content: center;
	}
	
	.nav-right-item image {
		width: 180upx;
		height: 180upx;
		margin: 0 auto;
	}

	.active {
		color: #007AFF;
	}
</style>
